import React, { Component } from 'react'
import {
  View,
  TextInput,
  StyleSheet,
  Text,
  Image,
  SafeAreaView,
  TouchableOpacity
} from 'react-native'

import getStorageValue from '../../utils/getStorageValue';
import fetchWebApi from '../../public/WebApi/fetchBase';
import Layer from '../../utils/Layer';
import {
  LOGIN_VERIFICATION_CODE,
  POST_APPWDVERUPDATE,
} from '../../public/WebApi/apiList';
import {
  Constant
} from '../../public/js/constant';

export default class forgetPwd extends Component {
  constructor(props) {
    super(props)
    this.state = {
      phone: "",// 手机号
      code: "",// 验证码
      Loginjudgment: false,
      regular: false,
      //验证码
      VerificationCode: [],
      time: 0,
      MainTime: '',
      MainTimeTitle: '获取验证码',
      timeId: '',
      promptText: false,// 提示 文本默认值
      promptPhone: false,// 手机号校验
      newPwd: "", // 新的密码
      confirmPwd: "",// 确认密码
    }


  }

  componentDidMount() {

  }

  //验证码
  async VerificationCode() {
    const {
      phone
    } = this.state
    const res = await fetchWebApi(LOGIN_VERIFICATION_CODE,
      {
        phone: phone
      }, 'POST');
    if (res.status == 200) {
      Layer.showMsg(res.msg);

    } else {
      Layer.showMsg(res.msg);
    }
  }
  //重置密码
  async Register() {
    const {
      phone,
      code,
      confirmPwd
    } = this.state
    const res = await fetchWebApi(POST_APPWDVERUPDATE,
      {
        token: await getStorageValue(Constant.TOKEN),
        phone: phone,
        code: code,
        password: confirmPwd
      }, 'POST');
    if (res.status == 200) {
      Layer.showMsg(res.msg);

      const {
        navigation
      } = this.props
      const key = navigation.state.key
      navigation.goBack(key)
    } else {
      Layer.showMsg(res.msg);
    }
  }
  // 校验手机号
  onChangeText(text) {
    this.setState({
      phone: text
    })
  };
  // 手机号校验逻辑
  phoneBlur() {
    const {
      phone
    } = this.state
    var p = /^1[3-9]\d{9}$/
    if (p.test(phone)) {
      this.setState({
        promptPhone: false,
      })
    } else {
      this.setState({
        promptPhone: true,
      })
    }
  }
  onChangeTexts(text) {

    this.setState({
      code: text
    })
  }
  // 新密码
  onChangeNewP(text) {

    this.setState({
      newPwd: text
    })
  }

  // 确认密码
  onChangeConfirmP(text) {

    this.setState({
      confirmPwd: text
    })
  }
  // 确认密码校验
  confirmBlur() {
    const {
      newPwd,
      confirmPwd
    } = this.state
    if (newPwd == confirmPwd) {
      this.setState({
        promptText: false
      })
    } else {
      this.setState({
        promptText: true
      })
    }
  }

  //验证码
  time = () => {
    this.VerificationCode()
    if (this.state.MainTime <= 0) {


      this.setState({
        MainTime: 60,
        MainTimeTitle: ''
      });
      this.bb = setInterval(() => {
        var aa = this.state.MainTime - 1;
        if (aa === 0) {
          clearInterval(this.bb);
          this.setState({
            MainTime: '',
            MainTimeTitle: '重新获取'
          })
        } else {
          this.setState({
            MainTime: aa,
            MainTimeTitle: ''
          })
        }
      }, 1000)
      this.setState({
        timeId: this.bb
      });
    }
  }

  Agreementcheck() {
    const {
      Loginjudgment
    } = this.state
    if (Loginjudgment) {
      return (
        <Image style={{ width: 15, height: 15, marginRight: 10 }} source={require('../../assets/images/search/Frameps.png')} ></Image>
      )
    } else {
      return (
        <Image source={require('../../assets/images/search/Ellipsess.png')} style={{ width: 15, height: 15, marginRight: 10 }}></Image>
      )
    }
  }
  // 手机号校验
  promptTextP() {
    const {
      promptPhone
    } = this.state
    if (promptPhone) {
      return (
        <Text style={styles.promptText}>手机号格式不正确</Text>
      )
    }
  }

  // 确认密码校验
  promptText() {
    const {
      promptText
    } = this.state
    if (promptText) {
      return (
        <Text style={styles.promptText}>新密码与确认密码不一致</Text>
      )
    }
  }
  render() {
    const {
      phone,
      newPwd,
      confirmPwd,
      code,
      MainTime,
      MainTimeTitle
    } = this.state
    return (
      <SafeAreaView style={styles.container}>

        <View style={styles.containers} >
          <Text style={styles.Contenttext}>重置密码</Text>
        </View>
        <View>
          <View style={styles.inputSearchBox}>
            <TextInput
              style={styles.inputSearch}
              onChangeText={text => this.onChangeText(text)}
              onBlur={() => this.phoneBlur()}
              value={phone}
              keyboardType={'numeric'}
              placeholder={"输入手机号码"}
            />
          </View>
          {/* 手机号校验 */}
          {this.promptTextP()}
        </View>
        <View style={styles.inputSearchBox}>
          <TextInput
            style={styles.inputSearch}
            onChangeText={text => this.onChangeNewP(text)}
            value={newPwd}
            keyboardType={'numeric'}
            placeholder={"请输入新密码"}
          />
        </View>
        <View>
          <View style={styles.inputSearchBox}>
            <TextInput
              style={styles.inputSearch}
              onChangeText={text => this.onChangeConfirmP(text)}
              onBlur={() => this.confirmBlur()}
              value={confirmPwd}
              keyboardType={'numeric'}
              placeholder={"请输入确认密码"}
            />
          </View>
          {/* 文本提示 */}
          {this.promptText()}
        </View>
        <View style={styles.inputSearchBox}>
          <TextInput
            style={styles.inputSearch}
            onChangeText={text => this.onChangeTexts(text)}
            value={code}
            keyboardType={'numeric'}
            placeholder={"输入验证码"}
          />
          <Text style={styles.VerificationCode}
            onPress={() => { this.time() }}>{MainTime}{MainTimeTitle}</Text>
        </View>
        {/* <View style={styles.middle}>
          <TouchableOpacity style={{ flexDirection: "row", alignItems: 'center' }} onPress={() => { this.setState({ Loginjudgment: !this.state.Loginjudgment }) }} >
            {this.Agreementcheck()}
            <Text>我已阅读</Text>
          </TouchableOpacity>
          <Text style={styles.colors}>《用户协议》</Text>
          <Text>和</Text>
          <Text style={styles.colors}>《平台协议》</Text>
        </View> */}
        <TouchableOpacity style={styles.tail} onPress={() => { this.Register() }} >
          <Text style={styles.Login}>重置密码</Text>
        </TouchableOpacity>
        <View style={styles.tails}>
          <Text style={styles.Tailcolor}
            onPress={() => { this.props.navigation.push('Accountlogin') }} >账号密码登录  </Text>
          <Text style={styles.Tailcolor}>收不到到验证码</Text>
        </View>
      </SafeAreaView >
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingLeft: 40,
    paddingRight: 40,
    display: 'flex',
    backgroundColor: 'white'
  },
  layer: {
    display: 'flex',
    justifyContent: 'space-around'
    , alignItems: 'center',
    flexDirection: 'row',
    marginTop: 120

  },
  Textred: {
    color: 'white'
  },
  promptText: {
    color: "red",
    fontSize: 12,
    paddingTop: "1%",
    paddingLeft: "5%"
  },
  inputSearchBox: {
    justifyContent: "center",
    height: 40,
    width: "100%",
    backgroundColor: 'rgba(232, 236, 240, 0.5)',
    marginTop: 25,
    borderRadius: 50,
  },
  inputSearch: {

    paddingLeft: 20,
    fontSize: 14,
    color: 'rgba(0, 0, 0, 0.31)'
  },
  containers: {
    marginTop: '25%',
    marginBottom: "8%"
  },
  move: {
    marginLeft: '8%'
  },
  Contenttext: {
    fontSize: 24,
    color: '#000000',
    fontWeight: 'bold',
  },
  Contenttexts: {
    fontSize: 12,
    color: 'rgba(0, 0, 0, 0.56)',
    marginTop: 5,
    fontWeight: 'bold'
  },
  VerificationCode: {
    color: '#4C6BDC',
    position: 'absolute',
    right: "10%",
    fontSize: 12,
  },
  colors: {
    color: '#4C6BDC'
  },
  Login: {
    fontSize: 18,
    color: '#FFFFFF'
  },
  middle: {
    flexDirection: 'row',
    alignItems: "center",
    marginTop: 20,
  },
  tail: {
    width: '100%',
    marginTop: 30,
    justifyContent: "center",
    alignItems: 'center',
    backgroundColor: '#1890FF',
    height: 40,
    borderRadius: 50,
  },
  tails: {
    marginTop: 20,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  Tailcolor: {
    fontSize: 12,
    color: 'rgba(0, 0, 0, 0.5)'
  },
  Agreementpicture: {
    justifyContent: "center",
    alignItems: "center",
    width: 16, height: 16, backgroundColor: "#1890FF", borderRadius: 50, marginRight: 10
  }
})